<template>
  <div>
    <van-cell-group>
      <van-cell title="我的账户" style="background: #f2f2f2;padding: 0 16px 8px">
      </van-cell>
    </van-cell-group>
    <van-row class="order_status">
      <van-col span="6">
        <div class="order_status_icon" @click="yueHanle">
          <van-icon name="qian"/>
        </div>
        <div>账户余额</div>
      </van-col>
      <van-col span="6">
        <div class="order_status_icon" @click="$router.push({path: '/user/fanli'})">
          <van-icon name="iconfonticonfonttianmaoyoujirenzheng2"/>
        </div>
        <div>服务费记录</div>
      </van-col>
      <van-col span="6">
        <div class="order_status_icon" @click="$router.push({path: '/user/dikou'})">
          <van-icon name="list"/>
        </div>
        <div>抵扣记录</div>
      </van-col>
      <van-col span="6">
        <div class="order_status_icon" @click="$router.push({path: '/user/zizhistore'})">
          <van-icon name="Qualifications"/>
        </div>
        <div>增票资质</div>
      </van-col>
      <van-col span="6">
        <div class="order_status_icon" style="margin-top: 10px;" @click="jifenHanle">
          <van-icon name="qian"/>
        </div>
        <div>服务费余额</div>
      </van-col>
      <van-col span="6">
        <div class="order_status_icon" style="margin-top: 10px;" @click="$router.push({path: '/user/usersIntegral'})">
          <van-icon name="coupon"/>
        </div>
        <div>兑换记录</div>
      </van-col>
      <van-col span="6">
        <div class="order_status_icon" style="margin-top: 10px;" @click="$router.push({path: '/user/repasswd'})">
          <van-icon name="star-o"/>
        </div>
        <div>修改密码</div>
      </van-col>
    </van-row>
  </div>
</template>

<script>
import { Row, Col, Dialog } from 'vant';
import { getRecharge, userGetBalance } from '@/api/api';

export default {
  name: 'user-member',

  data() {
    return {
      balance: 0
    };
  },
  methods: {
    yueHanle() {
      getRecharge().then(res => {
        console.log(res)
        if (res.data.errno === 0) {
          Dialog.alert({
            title: '账户余额',
            message: '￥' + res.data.data
          })
        } else {
          Dialog.alert({
            title: '提示',
            message: res.data.errmsg
          })
        }
      })
    },
    jifenHanle() {
      userGetBalance().then(res => {
        console.log(res)
        if (res.data.errno === 0) {
          Dialog.alert({
            title: '服务费余额',
            message: '￥' + res.data.data
          })
        } else {
          Dialog.alert({
            title: '提示',
            message: res.data.errmsg
          })
        }
      })
    }
  },
  components: {
    [Dialog.name]: Dialog,
    [Row.name]: Row,
    [Col.name]: Col
  }
};
</script>


<style scoped lang="scss">
@import '../../assets/scss/mixin';
.order_status {
  background-color: #fff;
  text-align: center;
  padding: 10px 0;
  font-size: 12px;

  > div {
    @include one-border;
    &::after {
      top: 50%;
      left: 50%;
      border-bottom: 0;
      border-right: 1px solid $border-color;
      height: 150%;
      transform: scale(0.5) translate3d(-50%, -50%, 0);
      transform-origin: 0 0;
    }
    &:last-child::after {
      border: 0;
    }
  }

  .order_status_icon {
    position: relative;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: inline-block;
    i {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate3d(-50%, -50%, 0);
      font-size: 24px;
      color: #000;
    }
  }
}
</style>
